<template>
  <!-- 附件一：消防设施维护保养计划及执行情况 -->
  <div class="attachment-1-wrap page">
    <div class="page-content page-index">
      <div class="row" style="padding-left:40px;">
        <form class="form-horizontal">
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">附件{{directoryOrder.attachment1}}：</h3>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">消防设施维护保养计划及执行情况</h3>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
    <div class="page-content">
      <div class="row">
        <form class="form-horizontal">
          <div class="form-group col-xs-8">
            <label class="col-xs-1 control-label"></label>
            <label class="col-xs-11 control-label font-bold text-left cid"></label>
          </div>
          <div class="form-group col-xs-12">
            <div class="text-center">
              <h3 class="h3" style="letter-spacing: 2px;">消防设施维护保养计划及执行情况</h3>
            </div>
          </div>
          <div class="form-group col-xs-12" style="margin-bottom:0;">
            <div>
              <div class="pro-info">
                <div class="col-xs-5 text-left no-padding font-bold">项目名称：{{proname}}</div>
                <div class="col-xs-2 no-padding text-right font-bold">项目编号：</div>
                <div class="col-xs-5 no-padding">
                  <input type="text" placeholder="请输入项目编号" class="form-control no-border no-padding font-bold" v-model="currentPronum">
                </div>
                <!-- <label class="col-xs-7 control-label no-padding">项目编号：<input type="text" name="owner" class="form-control no-border" v-model="pronum"></label> -->
              </div>
              <table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
                <thead>
                  <tr>
                    <th class="text-center">任务类型</th>
                    <th class="text-center">系统</th>
                    <th class="text-center">计划任务数</th>
                    <th class="text-center">完成任务数</th>
                    <th class="text-center">完成率</th>
                    <th class="text-center">备注</th>
                  </tr>
                </thead>
                <tbody>
                  <template v-for="(item, key, index) in formData">
                    <tr v-for="(obj, num) in item" :key="key+'_'+index+'_'+num">
                      <td v-if="num==0" class="text-center vCenter" :rowspan="item.length">{{typeMap(key)}}</td>
                      <td class="text-center vCenter">{{obj.sys}}</td>
                      <td class="text-center vCenter">{{obj.total}}</td>
                      <td class="text-center vCenter">{{obj.complete}}</td>
                      <td class="text-center vCenter">{{obj.completionRate}}</td>
                      <td class="text-center vCenter">
                        <input type="text" name="note" class="editable form-control no-border no-padding" v-model="obj.remarks">
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
  </div>
</template>
<script>
export default {
  name: 'Attachment-1',
  props: {
    initData: {
      type: Object,
    },
    proname: {},
    pronum: {},
    directoryOrder: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      currentPronum: this.pronum,
      formData: {
        patrol: [], // 巡查任务
        maintain: [], // 保养任务
        test: [], // 测试任务
        repair: [], // 维修任务
        temporary: [], // 临时任务
      },
    }
  },
  created() {
    let that = this
    if (that.initData) {
      that.formData.patrol = that.initData.patrol || [] // 巡查任务
      that.formData.maintain = that.initData.maintain || [] // 保养任务
      that.formData.test = that.initData.test || [] // 测试任务
      that.formData.repair = that.initData.repair || [] // 维修任务
      that.formData.temporary = that.initData.temporary || [] // 临时任务
    }
  },
  methods: {
    typeMap(key) {
      const TYPEMAPLIST = {
        patrol: '巡查任务',
        maintain: '保养任务',
        test: '测试任务',
        repair: '维修任务',
        temporary: '临时任务',
      }
      return TYPEMAPLIST[key] || ''
    },
    // 获取数据
    getData() {
      let that = this
      return that.formData
    },
  },
  watch: {
    pronum(val, oldVal) {
      if (val != oldVal) {
        this.currentPronum = val
      }
    },
    currentPronum(val, oldVal) {
      if (val != oldVal) {
        this.$emit('changePronum', val)
      }
    },
  },
}
</script>